<template>
	<view>
		<view class="listBox">
			<view class="item">
				<u-field :field-style="inputcss" v-model="addres.real_name " :border-bottom="false" label="收货人" placeholder='请输入姓名'>
				</u-field>
			</view>
			<view class="item">
				<u-field :field-style="inputcss" v-model="addres.phone" :border-bottom="false" label="手机号" placeholder='请输入手机号'>
				</u-field>
			</view>
			<view class="item">
				<u-field :disabled="true" @click="show = true" :field-style="inputcss" v-model="addres.addres " :border-bottom="false"
				 placeholder="请选择地区" label="所在地区">
				</u-field>
				<u-picker mode="region" v-model="show" @confirm="addresget"></u-picker>
			</view>
			<view class="item">
				<u-input v-model="addres.detail" :custom-style="textareacss" placeholder="详细地址： 如道路，门牌号，小区，楼道号，单元室" type="textarea"
				 :border="false" height="240" :auto-height="true" />
			</view>
		</view>
		<!-- 		<view class="moren">
			设为默认地址
			<u-switch class="xuanze" size="42" active-color="#53A051" inactive-color="#E2E2E2" v-model="addres.moren"></u-switch>
		</view> -->
		<view class="save" @click="upaddres">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				addres: {
					real_name: '',
					phone: '',
					addres: '',
					detail: '',
					moren: false
				},
				province: null,
				city: null,
				district: null,
				inputcss: {
					height: "70rpx"
				},
				textareacss: {
					paddingLeft: "20rpx"
				},
				info: null,
				xiugai: false
			};
		},
		onLoad(index) {
			console.log(index);

			uni.getStorage({
				key: 'userinfo',
				success: (res) => {
					this.info = res.data;
					if (index.index) {
						this.xiugai = true;
						this.getAddres(index.index)
					}
				}
			})
		},
		methods: {
			getAddres(index) {
				uni.request({
					url: this.$AJAX_URL + 'my/useraddr',
					method: 'POST',
					data: {
						uid: this.info.uid
					},
					success: (res) => {
						console.log(res);
						this.addres = res.data.data[index]
						this.addres.addres = res.data.data[index].province + res.data.data[index].city + res.data.data[index].district;
						this.province = res.data.data[index].province
						this.city = res.data.data[index].city
						this.district = res.data.data[index].district
					}
				})

			},
			addresget(val) {
				console.log(val);
				this.addres.addres = val.province.label + val.city.label + val.area.label;
				this.province = val.province.label;
				this.city = val.city.label;
				this.district = val.area.label;

			},
			upaddres() {
				if (this.addres.real_name && this.province && this.city && this.district && this.addres.detail && this.addres.phone) {
					if (!this.xiugai) {
						uni.request({
							url: this.$AJAX_URL + 'my/addaddr',
							method: 'POST',
							data: {
								uid: this.info.uid,
								real_name: this.addres.real_name,
								province: this.province,
								city: this.city,
								district: this.district,
								detail: this.addres.detail,
								phone: this.addres.phone
							},
							success: (res) => {
								// console.log(res);
								this.$u.toast(res.data.msg)
								uni.navigateBack()
							},
							fail: () => {
								this.$u.toast('添加失败')
							}
						})
					} else {
						uni.request({
							url: this.$AJAX_URL + 'my/editaddr',
							method: 'POST',
							data: {
								uid: this.info.uid,
								addrid: this.addres.id,
								real_name: this.addres.real_name,
								province: this.province,
								city: this.city,
								district: this.district,
								detail: this.addres.detail,
								phone: this.addres.phone
							},
							success: (res) => {
								this.$u.toast(res.data.msg)
								uni.navigateBack()
							},
							fail: (err) => {
								this.$u.toast('修改失败')
							}
						})
					}
				} else {
					this.$u.toast('请输入完整信息')
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.listBox {
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.u-label-text {
		color: #979797;
	}

	.moren {
		height: 112rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		line-height: 112rpx;
		font-size: 28rpx;
		color: #979797;
		padding-left: 20rpx;

		.xuanze {
			float: right;
			margin-top: 35rpx;
			margin-right: 30rpx;
		}
	}

	.save {
		width: 400rpx;
		height: 88rpx;
		background-color: #FF423F;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 88rpx;
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 70rpx;
		border-radius: 40rpx;
	}
</style>
